<template>
	<view>
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title">
				<view class="left">
					<text style="color: red;">*</text>入库批次
				</view>
				<view class="right1">
					<view class="txt-right">
						<input placeholder="请输入" style="text-align: right;font-size: 32rpx;color: #2b2b2b;" v-model="batchNum" />
					</view>
				</view>
			</view>
		</view>
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title" @click="selectDateTime">
				<view class="left">
					<text style="color: red;">*</text>生产日期
				</view>
				<view class="right1">
					<view :class="[produceDate!=''?'txt-black':'']" style="font-size: 32rpx;">{{produceDate==''?'请选择':produceDate}}</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<u-datetime-picker :show="show" :value="value4" mode="date" @cancel="cancelTime" @confirm="confirmTime">
		</u-datetime-picker>
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title">
				<view class="left">
					<text style="color: red;">*</text>单价
				</view>
				<view class="right1">
					<view class="txt-right" style="display: flex; color: #2b2b2b;align-items: center;">
						<view class="">
							<input type="number" placeholder="请输入" style="text-align: right;font-size: 32rpx; margin-right: 10rpx;"
							v-model="price" />
						</view>
						<view class="">
							元
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;">*</view>入库数量
				</view>
				<view class="right1">
					<view class="txt-right" style="display: flex; color: #000;">
							<input type="number"  placeholder="请输入" style="text-align: right; margin-right: 10rpx;" v-model="params.partBatchList[0].stockAmount"/>
					</view>
				</view>
			</view>
		</view> -->
		<view class="btn-botom2">
			<view class="right-btn" @click="togoConfirm">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				batchNum: '',
				price: '',
				dataInfo: {},
				produceDate: '',
				show: false,
				value4: Number(new Date()),
				params: {
					partId: '', //备件id
					partBatchList: [{
						batchNum: '', //批次号
						stockAmount: 0, //数量
						price: '', //金额
						produceDate: '' //出产日期
					}]
				}
			}
		},
		onLoad(options) {
			if (options) {
				this.params.partId = JSON.parse(decodeURIComponent(options.dataInfo)).id;
				this.dataInfo = JSON.parse(decodeURIComponent(options.dataInfo))
			}
			console.log('options===>', options, this.params.partId)
		},
		methods: {
			cancelTime(e) {
				console.log('时间===>', e)
				this.show = false;
			},
			confirmTime(e) {
				console.log('时间===>', e.value)
				this.show = false;
				const timeFormat = uni.$u.timeFormat;
				let timeValue = timeFormat(e.value, 'yyyy-mm-dd');
				this.produceDate = timeValue;
				this.params.partBatchList[0].produceDate = this.produceDate;
			},
			selectDateTime() {
				this.show = true;
			},
			togoConfirm() {
				this.params.partBatchList[0].batchNum = this.batchNum;
				this.params.partBatchList[0].price = this.price;
				this.params.partBatchList[0].produceDate = this.produceDate;
				let params = {
					partId: this.params.partId, //备件id
					batchNum: this.batchNum, //批次号
					price: this.price, //金额
					produceDate: this.produceDate //出产日期
				}
				if (!this.params.partBatchList[0].batchNum) return uni.$u.toast('请输入入库批次')
				if (!this.params.partBatchList[0].produceDate) return uni.$u.toast('请选择生产日期')
				if (!this.params.partBatchList[0].price) return uni.$u.toast('请输入单价')
				console.log('提交参数===>', this.params)
				uni.$u.http.post(`/device/mobile/devicePartBatch/insertPartBatch`, params).then(res => {
					console.log('res===>', res)
					if (res.code == 0) {
						uni.$u.toast('提交成功')
						setTimeout(() => {
							// uni.navigateBack({
							// 	delta: 1
							// })

							//跳转并且传递参数
							uni.navigateTo({
								url: '/pages/subPackagesB/stockList/ruku?params=' +
									encodeURIComponent(JSON.stringify(res.data)) + '&dataInfo=' +
									encodeURIComponent(JSON.stringify(this.dataInfo))
							})
						}, 1000)
					}
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss">
	.bx-list {
		background: #fff;
		border-bottom: 2rpx solid #f5f5f5;

		.bx-list-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;

			.left {
				display: flex;
				font-size: 32rpx;
				font-weight: 400;
				min-width: 200rpx;
				// letter-spacing: 0px;
				// line-height: 0px;
				color: #4D4D4D;
				word-break: break-all;
				word-wrap: break-word;
			}

			.right {
				display: flex;
				justify-content: space-around;
				width: 50%;

				.sm-add {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}

				.sm-sd {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}
			}

			.right1 {
				display: flex;
				align-items: center;
				font-size: 34rpx;
				color: #8c8c8c;

				.txt-black {
					color: #2B2B2B;
				}
			}
		}

		.bx-info {
			display: flex;
			padding: 10rpx 20rpx 20rpx 20rpx;

			.left-icon {
				image {
					width: 96rpx;
					height: 96rpx;
				}
			}

			.right-txt {
				padding-left: 32rpx;

				.txt1 {
					color: #000000;
					font-size: 34rpx;
					font-weight: 400;
				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}

		}

		.input-textrea {
			margin: 20rpx 20rpx 0 20rpx;
			border-radius: 8rpx;
			background: #f2f2f2;

			.textrea {
				background: #f2f2f2;
			}
		}

	}

	.btn-botom2 {
		// width: 100%;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 32rpx;
		margin-top: 40rpx;

		.right-btn {
			width: 90%;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 6px;
			background: #0F53AC;
			padding: 24rpx 60rpx;
			color: #fff;
		}
	}

	.txt-black {
		text-align: end;
		width: 400rpx;
		color: #2B2B2B;
		font-size: 16px;
		font-weight: 400;
		overflow: hidden; //超出的文本隐藏
		text-overflow: ellipsis; //溢出用省略号显示
		white-space: nowrap; // 默认不换行；
	}
</style>